<template>
	<view class="all-main">
		<view class="main">
			<view class="top">
				<view class="items">
					<view class="icons">
						<image src="/static/menu/jiandan.png" mode=""></image>
						<text class="nums">1</text>
					</view>
					<view class="title">
						<text>建单</text>
					</view>
				</view>
				<view class="items">
					<view class="icons">
						<image src="/static/menu/ruku.png" mode=""></image>
						<text class="nums">1</text>
					</view>
					<view class="title">
						<text>提车入库</text>
					</view>
				</view>
				<view class="items">
					<view class="icons">
						<image src="/static/menu/zhongzhuan.png" mode=""></image>
						<text class="nums">0</text>
					</view>
					<view class="title">
						<text>预抵中转</text>
					</view>
				</view>
				<view class="items">
					<view class="icons">
						<image src="/static/menu/luozhan.png" mode=""></image>
						<text class="nums">0</text>
					</view>
					<view class="title">
						<text>预低落站</text>
					</view>
				</view>
				<view class="items">
					<view class="icons">
						<image src="/static/menu/saoma.png" mode=""></image>
						<!-- <text class="nums">10</text> -->
					</view>
					<view class="title">
						<text>扫一扫</text>
					</view>
				</view>
				<view class="items">
					<view class="icons">
						<image src="/static/menu/xiaoxi.png" mode=""></image>
						<text class="nums">0</text>
					</view>
					<view class="title">
						<text>消息</text>
					</view>
				</view>
			</view>
			<view class="search">
				<view class="lefts">
					<uni-search-bar @confirm="search" @input="searchValue" clearButton="auto" cancelButton="none" />
				</view>
				<view class="rights">
					<text>方向</text>
					<uni-icons type="down" size="15"></uni-icons>
				</view>
			</view>
			<view class="tabs">
				<view class="lefts">
					<view class="tags">
						<text>始发</text>
					</view>
					<view class="tags">
						<text>中转</text>
					</view>
					<view class="tags">
						<text>落站</text>
					</view>
					<view class="tags">
						<text>草稿</text>
					</view>
				</view>
				<view class="rights">
					<view class="days">
						<text>60天</text>
						<uni-icons type="down" color="#ffffff" size="15"></uni-icons>
					</view>
					<view class="states">
						<text>状态</text>
						<uni-icons type="down" size="15"></uni-icons>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="lefts">
					<text>全部</text>
					<text>1</text>
					<text>条</text>
				</view>
				<view class="rights">
					<text>当前筛选</text>
					<text>1</text>
					<text>条</text>
				</view>
			</view>
			<view class="lists">
				<view class="items">
					<view class="tops">
						<view class="title">
							<text>汽车名称</text>
						</view>
						<view class="carframe">
							<text>车架号</text>
							<text>0001115</text>
						</view>
						<view class="address">
							<text>发车库</text>
							<text>(长沙)</text>
						</view>
					</view>
					<view class="content">
						<view class="c-top">
							<view class="c-start">
								<view class="c-start-title">
									<text>呼和浩特</text>
								</view>
								<view class="c-start-area">
									<text>区域</text>
								</view>
							</view>
							<view class="c-order">
								<view class="c-order-distance">
									<text>268KM</text>
								</view>
								<view class="c-order-info">
									<text>订单号</text>
									<text>SC25612545</text>
								</view>
							</view>
							<view class="c-end">
								<text>长沙</text>
							</view>
						</view>
						<view class="c-con">
							<view class="c-lefts">
								<text>创建于</text>
								<text>2025-06-03</text>
							</view>
							<view class="c-rights">
								<text>应收运费</text>
								<text>（现付）</text>
								<text class="moneys">￥400</text>
							</view>
						</view>
						<view class="c-bottom">
							<view class="c-items">
								<view class="item-box">
									<uni-icons type="phone" color="#2979ff" size="15"></uni-icons>
									<text>联系分站</text>
								</view>
							</view>
							<view class="c-items">
								<view class="item-box">
									<uni-icons type="phone" color="#2979ff" size="15"></uni-icons>
									<text>联系客户</text>
								</view>
							</view>
							<view class="c-items">
								<view class="item-box">
									<uni-icons type="redo-filled" color="#2979ff" size="15"></uni-icons>
									<text>分享</text>
								</view>
							</view>
							<view class="c-items">
								<view class="item-box">
									<uni-icons type="location" color="#2979ff" size="15"></uni-icons>
									<text>查在途</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {
			// 确认搜索
			search() {

			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			padding: 20rpx;

			.top {
				padding-top: 30rpx;
				border: 1px solid #c8c9cc;
				border-radius: 18rpx;
				box-shadow: 2px 2px 10px 2px #c8c9cc;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.items {
					width: 25%;
					text-align: center;
					flex-direction: column;
					align-items: center;
					margin-bottom: 30rpx;
					font-size: 24rpx;

					.icons {
						position: relative;

						image {
							width: 90rpx;
							height: 90rpx;
						}

						.nums {
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							position: absolute;
							background-color: #fa3534;
							color: #ffffff;
							border-radius: 50%;
							line-height: 40rpx;
							right: 25rpx;
							top: -10rpx;
						}
					}
				}
			}

			.search {
				padding-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lefts {
					width: 80%;

					.uni-searchbar {
						padding-left: 0px !important;

						.uni-searchbar__box {
							height: 40px !important;
						}
					}
				}

				.rights {
					font-size: 24rpx;
					border: 1px solid #c8c9cc;
					border-radius: 10rpx;
					padding: 16rpx 20rpx;

					text {
						padding-right: 6rpx;
					}
				}
			}

			.tabs {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lefts {
					width: 66%;
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 25%;
						flex-direction: column;
						text-align: center;
					}
				}

				.rights {
					display: flex;
					font-size: 24rpx;

					.days {
						padding: 6rpx 10rpx;
						border-radius: 6rpx;
						background-image: linear-gradient(to right, #a0cfff, #2979ff);
						color: #ffffff;
					}

					.states {
						margin-left: 16rpx;
						padding: 6rpx 0;
					}
				}
			}

			.total {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #909399;
			}

			.lists {
				margin-top: 20rpx;

				.items {
					border-radius: 30rpx;
					box-shadow: 2px 2px 10px 2px #c8c9cc;

					.tops {
						display: flex;
						font-size: 26rpx;
						padding: 30rpx 20rpx;
						border-top-left-radius: 30rpx;
						border-top-right-radius: 30rpx;
						background-image: linear-gradient(to bottom, #d8e6ff, #f2f4ff);
						border-bottom: 1px solid #f4f4f5;

						.title {
							width: 30%;
						}

						.carframe {
							text-align: center;
							width: 40%;
						}

						.address {
							text-align: right;
							width: 30%;
							color: #f42500;
						}
					}

					.content {
						padding: 20rpx;

						.c-top {
							display: flex;
							font-size: 32rpx;
							align-items: center;
							
							.c-start {
								width: 20%;
								
								.c-start-title {
									font-weight: bold;
								}
								
								.c-start-area {
									font-size: 24rpx;
									color: #909399;
								}
							}
							
							.c-order {
								width: 60%;
								text-align: center;
								color: #909399;
							}
							
							.c-end {
								width: 20%;
								text-align: right;
								font-weight: bold;
							}
						}
					
						.c-con {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							color: #909399;
							font-size: 28rpx;
							
							.c-rights {
								.moneys {
									font-weight: bold;
									color: #f42500;
								}
							}
							
						}
					
						.c-bottom {
							display: flex;
							
							.c-items {
								margin-top: 20rpx;
								width: 25%;
								font-size: 20rpx;
								display: flex;
								align-items: center;
								
								.item-box {
									width: 80%;
									padding: 6rpx 10rpx;
									border: 1px solid #2979ff;
									color: #2979ff;
									text-align: center;
								}
								
								.item-box:nth-child(2) {
									text-align: center;
								}
								
								.item-box:nth-child(3) {
									text-align: center;
								}
								
								.item-box:nth-child(4) {
									text-align: right;
								}
							}
						}
					}
				}
			}
		}
	}
</style>